<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Props与Emits事件</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <mycomponent :my-message="child.myMessage"  :you-need-number="child.youNeedNumber"></mycomponent>
</div>
<div id="app2">
    <p>{{total}}</p>
    <button-counter @add="incrementTotal"></button-counter>
    <button-counter @add="incrementTotal"></button-counter>
</div>
</body>
<script>
    var Child={
        //        声明props
//        props:['message'],
        props:{
            myMessage:{
                Type:String,
                Required:true
            },
            youNeedNumber:{
                Type:Number,
                Required:true
            }
        },
//        就像data一样，prop可以用在模板中
//        同样也可以在vm实例中向"this.message"这样使用
        template:'<div id="container"><button>{{myMessage}}</button><p>{{youNeedNumber}}</p></div>'
    }

    var vm=new Vue({
        el:'#app',
        data:{
            child:{myMessage:'点我吧',
            youNeedNumber:2016}
        },
        components:{
            'mycomponent':Child
        }
    })
    Vue.component('button-counter',{
        template:'<button @click="increment">{{counter}}</button>',
        data:function () {
            return {
                counter:0
            }
        },
        methods:{
            increment:function(){
                this.counter+=1;
                this.$emit('add');
            }
        }
    })

    var vm2=new Vue({
        el:'#app2',
        data:{
            total:0
        },
        methods:{
            incrementTotal:function () {
                this.total+=1
            }
        }
    })
</script>
</html>